/**
 * Created by 86185 in 2020/8/30 on 16:56
 */
import React from "react"

import "@/components/common/BarChar/BarChar.component.styl"

class BarChar extends React.Component {
    constructor(props) {
        super(props);
    }

    initChart() {
        let {id, yName, yData, seriesName,seriesData} = this.props.barData;
        let myChart = echarts.init(document.getElementById(`${id}-bar-chart`));
        let option = {
            grid: {
                left: "15%",
                bottom: "15%",
                top: "20%",
                right: "10%"
            },
            tooltip: {
                trigger: "item",
                textStyle: {
                    fontSize: 12,
                },
                formatter: "{a} <br/>{b}：{c}"
            },
            yAxis: {
                name: yName,
                nameTextStyle: {
                    padding: [0, 0, 0, 15],
                    color: "#bfbebe",
                },
                data: yData,
                axisLabel: {
                    textStyle: {
                        color: "#bfbebe",
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            },
            xAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: "#bfbebe"
                    },
                    formatter: function (value) {
                        return value.toString();
                    }
                }
            },
            series: [
                {
                    name: seriesName,
                    type: "bar",
                    barWidth: 10,
                    itemStyle: {
                        color: "#02CDE6",
                        barBorderRadius: [0, 5, 5, 0]
                    },
                    data: seriesData
                }
            ]
        };

        window.onresize = function () {
            myChart.resize();
        }
        myChart.setOption(option);
    }

    componentDidMount() {
        this.initChart();
    }

    render() {
        return (
            <div id={`${this.props.barData.id}-bar-chart`} className="bar-chart">

            </div>
        )
    }
}

export default BarChar